<template>
  <div v-if="imageInfo">
    <div class="title">
      <Title title="镜像标签"></Title>
      <p @click="addIsShow = true" name="add-o">添加 ＞</p>
    </div>
    <van-popup v-model="addIsShow" class="addtagform">
      <Title title="添加标签"></Title>
      <span>标签名：</span>
      <input type="text" v-model.trim="newtag">
      <p>
        <button @click="addTag" class="add">提交</button>
        <button @click="addIsShow = false" class="close">取消</button>
      </p>
    </van-popup>
    <ImageTags :tags="imageInfo.RepoTags" @success="fetchImage"></ImageTags>
    <Title title="镜像信息" class="title"></Title>
    <ImageInfo :imageInfo="imageInfo"></ImageInfo>
  </div>
  <div v-else>
    <van-empty description="数据请求失败！" />
  </div>
</template>

<script>
import ImageTags from '@/components/imageContent/ImageTags'
import ImageInfo from '@/components/imageContent/ImageInfo'
import Title from '@/components/Title'
import Vue from 'vue'
import { Popup, Icon } from 'vant'

Vue.use(Popup)
Vue.use(Icon)
export default {
  data () {
    return {
      addIsShow: false,
      newtag: '',
      imageInfo: null
    }
  },
  mounted () {
    this.imageId = this.$router.history.current.params.id
    this.fetchImage()
  },
  methods: {
    // 请求镜像数据
    fetchImage () {
      const parse = {
        data: {
          docker: `curl --unix-socket /var/run/docker.sock -s "http:/v1.40/images/${this.imageId}/json"`
        }
      }
      this.$post(parse, res => {
        this.imageInfo = JSON.parse(res)
        // console.log(this.imageInfo)
      })
    },
    // 添加tag
    addTag () {
      const parse = {
        data: {
          docker: `curl -w %{http_code} --unix-socket /var/run/docker.sock -s -X POST "http:/v1.40/images/${this.imageInfo.Id}/tag?repo=${this.newtag}"`
        }
      }
      this.$post(parse, res => {
        this.addIsShow = false
        var data = JSON.parse(res)
        if (data.message) {
          return this.$Notify({ type: 'danger', message: '添加失败！' })
        }
        if (data >= 200 && data < 300) {
          this.$Notify({ type: 'success', message: '添加成功！' })
          this.fetchImage()
          this.newtag = ''
        } else {
          this.$Notify({ type: 'danger', message: '添加失败！' })
        }
      })
    }
  },
  components: {
    ImageTags,
    ImageInfo,
    Title
  }
}
</script>

<style lang="scss" scoped>
.title{
  margin: vw(50) 0 vw(40) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  p{
    font-size: vw(25);
    color: #898989;
    margin-bottom: vw(30);
  }
}
.addtagform{
  width: vw(500);
  height: vw(350);
  padding: vw(20);
  font-size: vw(28);
  border-radius: vw(20);
  span{
    display: inline-block;
    margin: vw(20) 0;
  }
  input{
    display: inline-block;
    margin: vw(20) 0;
    width: 97%;
    border: 1px solid #dbdbdb;
    height: vw(55);
    padding: vw(5);
  }
  p{
    display: flex;
    justify-content: center;
    margin-top: vw(20);
  }
  .add{
    width: 30%;
    height: vw(60);
    margin-right: vw(20);
    border-radius: vw(5);
    background: rgb(46, 172, 109);
    color: #fff;
  }
  .close{
    width: 30%;
    height: vw(60);
    border-radius: vw(5);
    background: cornflowerblue;
    color: #fff;
  }
}
</style>
